import { RootDispatch } from '@/store';
import { Tree } from 'antd';
import React from 'react';
import { useDispatch } from 'react-redux';
import { leftDatas } from '../../datas';

const treeData = leftDatas.map((item, index) => {
  return {
    key: index + index,
    title: item.title,
    properties: item.properties,
  };
});

const TreeItem = () => {
  const { printReport } = useDispatch<RootDispatch>();
  return (
    <div
      style={{
        margin: '0 20px',
      }}
    >
      <Tree
        treeData={[...treeData]}
        // height={233}
        defaultExpandAll
        draggable
        allowDrop={() => false}
        onDragStart={({ event, node }) => {
          console.log('开始拖拽', node);
          printReport.updateState({
            selectedStatus: 'mouseDown',
            selectData: node,
          });
        }}
      />
    </div>
  );
};

export default TreeItem;
